<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>初识webgl</title>
    <script type="text/javascript">
        function load(){
            var canvas = document.getElementById('webgl')
            var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
            // 查询函数 通过传入的属性名来获取对应的属性值
            var clearColorValue = gl.getParameter(gl.COLOR_CLEAR_VALUE)
            var p1 = document.getElementById('defaultColor')
            var p2 = document.getElementById('newColor')
            p1.innerHTML = "默认的刷新颜色 " + clearColorValue
            gl.clearColor(1,0,0,1)
            gl.clear(gl.COLOR_BUFFER_BIT)
            clearColorValue = gl.getParameter(gl.COLOR_CLEAR_VALUE)
            p2.innerHTML = "新的刷新颜色 " + clearColorValue
            console.log("新的刷新颜色 ",clearColorValue)
            window.gl = gl
        }
    </script>
</head>
<body onload="load()">
    <canvas id="webgl" width="300" height="300"></canvas>
    <div>
        <p id="defaultColor" />
        <p id="newColor" />
    </div>
</body>
</html>
